<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .ball {
            --delay: 0s;
            width: 50px;
            height: 50px;
            background-color: red;
            border-radius: 50%;
            margin-bottom: 80px;
            animation: move 1s linear var(--delay) forwards paused;
        }

        @keyframes move {
            50% {
                transform: translate(100px) scale(1.5);
            }
            100% {
                transform: translate(200px) scale(1);
            }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="ball"></div>
    <label>
        <input type="range" value="0" min="0" max="1" step="0.01"/>
    </label>
</div>

<script>
    const slide = document.querySelector('input')
    const ball = document.querySelector('.ball')

    const cal = () => {
        ball.style.setProperty('--delay', `-${slide.value}s`)
    }
    slide.oninput = cal
</script>
</body>
</html>